<template>
	<view class="list">
		<view class="wrap" v-for="(item,index) in list" :key="index" >
			<view class="shopName flex" v-if="type != 'points_goods'">
				<image src="@/static/user/icon4.png" mode="widthFix" class="icon"></image>
				<text>{{item.store_name}}</text>
			</view>
			<view class="item flex" @tap.stop="toDet(item.goods_id)"  v-if="type == 'shop_vr'">
				<view class="flex" style="flex:1">
					<image :src="item.goods_image" mode="aspectFill" class="img"></image>
					<view class="font">
						<view class="h3 ">
							<view class="line1">
								{{item.goods_name}}
							</view>
						</view>
						<view class="step flex-bt">
							<view class="price">
								¥{{item.goods_price}}
							</view>
							<block v-if="isCart || isOrder">
								<u-number-box @minus="numberChange(index)" @plus="numberChange(index)" :min="min" :max="item.virtual_limit" bg-color="#fff" :input-width="60" v-model="item.quantity"></u-number-box>
							</block>
							<view v-else class="num">
								x{{item.goods_num}}
							</view>
						</view>
					</view>
				</view>
			</view>	
			<template v-else>
				<view class="item flex" @tap.stop="toDet(el.goods_id)" v-for="(el,i) in item.goods" :key="i">
					<view @tap.stop="select(index,i)" v-if="isCart" style="margin-right: 15rpx;">
						<u-icon name="checkmark-circle-fill" color="#f0f0f0" size="40" v-show="el.selected == 0"></u-icon>
						<u-icon name="checkmark-circle-fill" color="#ff6a6c" size="40" v-show="el.selected == 1"></u-icon>
					</view>
					
					<view class="flex" style="flex:1">
						<image :src="el.goods_image" mode="aspectFill" class="img"></image>
						<view class="font">
							<view class="h3 ">
								<view class="line1">
									{{el.goods_name}}
								</view>
							</view>
							<!-- <view class="p">
								<view class="line1">
									<text v-for="(el,i) in el.specificationValue" :key="i">
										{{el}}
									</text>
								</view>
							</view> -->
							<view class="step flex-bt" @tap.stop="">
								<view class="price" v-if="type == 'points_goods'">
									{{parseInt(el.goods_price)}}积分
								</view>
								<view class="price" v-else>
									¥{{el.goods_price}}
								</view>
								<block v-if="isCart || isOrder">
									<u-number-box @change="numberChange(index,i)" @minus="numberChange(index,i)" @plus="numberChange(index,i)" :min="min" :max="999" bg-color="#fff" :input-width="60" v-model="el.goods_num"></u-number-box>
								</block>
								<view v-else class="num">
									x{{el.goods_num}}
								</view>
							</view>
						</view>
					</view>
					
				</view>
			</template>
			
			<!-- 提交订单 -->
			<view v-if="isOrder" class="msg-box">
				<view class="msg-item flex">
					<text>留言</text>
					<input type="text" v-model="item.message" :data-index="index" @blur="inputChange" placeholder="留言备注" class="inp" placeholder-style="color: gray;">
				</view>
				<view class="msg-item ri" v-if="type != 'shop_vr'">
					<text v-if="item.freight_total">运费{{item.freight_total}}元</text>
					<text v-else>免运费</text>
				</view>
			</view>
			<view class="bottom flex" v-if="type != 'shop_vr'">
				<view class="right">
					<view class="total" v-if="type == 'points_goods'">
						共{{item.sum_num}}件商品，合计<text class="price">{{parseInt(item.sum_price)}}积分</text>
					</view>
					<view class="total" v-else>
						共{{item.sum_num}}件商品，本店合计<text class="price">¥{{toFix(item.sum_price)}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import { mapState, mapMutations, mapGetters } from 'vuex';
	export default {
		//属性
		props: {
			list:{
				type:Array,
				default () {
					return [];
				}
			},
			// v-model使用
			value:{
				type:Array,
				default () {
					return [];
				}
			},
			// 是否是购物车
			isCart:{
				type:Boolean,
				default: false,
			},
			// 是否是提交订单
			isOrder:{
				type:Boolean,
				default: false,
			},
			// 是否为积分订单
			type:{
				type:String,
				default:'',
			},
			min:{
				type:Number,
				default: 1,
			}
		},
		data(){
			return {
				newList:this.value
			}
		},
		methods: {
			select(index,i){
				this.list[index].goods[i].selected == 0 ?this.list[index].goods[i].selected = 1 :this.list[index].goods[i].selected = 0;
				let item = this.list[index];
				this.$emit('select',{item,index,i});
			},
			toDet(id){
				uni.navigateTo({
					url:'/pages/shop/details?id=' + id
				})
			},
			tosDet(id){
				uni.navigateTo({
					url:'/pagesUsers/user/tuihuo_det?id=' + id
				})
			},
			
			toFix(number){
				return number.toFixed(2)
			},
			// 跳转页面方法
			toShouhou(id) {
				this.$emit('toShouhou',id);
			},
			numberChange(index,i){
				let item = this.list[index];
				this.$emit('numberChange',{item,index,i});
			},
			inputChange(e){
				let index = e.target.dataset.index;
				let item = this.list[index];
				this.$emit('inputChange',{item,index});
				
			},
		}
	}
	
</script>

<style lang="scss" scoped>
	.msg-box{
		.msg-item{
			border-bottom: 1px solid #EEEEEE;
			font-size: $font-b;
			color: #888;
			padding: 20rpx 0;
			.inp{
				margin-left: 20rpx;
				flex: 1;
			}
		}
	}
	.btn{
		border: 1px solid #D0D0D0;
		border-radius: 32rpx;
		width: 172rpx;
		height: 64rpx;
		font-size: $font-s;
		color: $black;
	}
	.wrap{
		width: 100%;
		background: $white;
	}
	.shopName{
		padding: 20rpx 0 0;
		font-size: $font-b;
		color: $black;
		.icon{
			margin-right: 16rpx;
			width: 36rpx;
		}
	}
	.item{
		flex: 1;
		padding: 20rpx 0;
		border-bottom: 1px solid #EEEEEE;
		.img{
			width: 128rpx;
			height: 128rpx;
			border-radius:16rpx;
			margin-right: 24rpx;
		}
		.font{
			flex: 1;
			width:0;
			.h3{
				font-weight: 400;
				font-size: $font-b;
				line-height: 150%;
				color: #000000;
				margin-bottom: 16rpx;
			}
			.p{
				font-weight: 300;
				font-size: $font-s;
				line-height: 150%;
				color: #666666;
				margin-bottom: 32rpx;
			}
			.price{
				font-size: $font-b;
				line-height: 140%;
			}
			.num{
				font-size: $font-b;
				color: $black;
			}
		}
	}
	.sicon{
		width: 36rpx;
		margin-right: 24rpx;
	}
	
	.bottom{
		width: 100%;
		height: 104rpx;
		background: #FFFFFF;
		justify-content: flex-end;
		.right{
			padding-right: 30rpx;
			text-align: right;
			.total{
				font-weight: 400;
				font-size: $font-b;
				line-height: 150%;
				color: $black;
				.price{
					font-size: 32rpx;
				}
			}
		}
	}
</style>